// components/rgbw-chart/rgbw-chart.js
Component({
  properties: {
    // 初始数据点
    initialData: {
      type: Object,
      value: {},
    },
    // 是否允许编辑
    editable: {
      type: Boolean,
      value: true,
    },
    // 图表标题
    title: {
      type: String,
      value: 'RGBW曲线',
    },
    // 是否显示坐标轴信息
    showAxisInfo: {
      type: Boolean,
      value: true,
    },
    // 是否显示提示信息
    showTips: {
      type: Boolean,
      value: true,
    },
    channels: {
      type: Array,
      value: [],
      observer(newVal) {
        this.initChannel();
      }
    },
  },

  data: {
    // 图表数据
    chartData: {},
    channelColors: {},
    // 当前激活的曲线和节点
    activeColor: '',
    activeNodeIndex: -1,
    // 缩放和平移状态
    scale: 1,
    offsetX: 0,
    offsetY: 0,
    // 图表尺寸
    chartWidth: 0,
    chartHeight: 0,
    // 坐标轴刻度
    xAxisTicks: [0, 4, 8, 12, 16, 20, 24],
    yAxisTicks: [0, 20, 40, 60, 80, 100],
    // 触摸相关
    touchStartX: 0,
    touchStartY: 0,
    lastTapTime: 0,
    // 节点操作状态
    isDragging: false,
    showDeleteButton: false,
    showAddButton: true,
    // 节点编辑弹窗
    showNodeEditor: false,
    editingNode: null,
    // Canvas截图相关
    canvasImageUrl: '',
    showCanvasImage: false,
    hideCanvas: false,
    columnClass: 'cols-5', // 默认5列
  },

  lifetimes: {
    attached() {
      //console.log(this.data.channelConfigs)
      // 组件挂载时初始化
      //this.initChart()
    },
    ready() {
      // 获取图表容器尺寸
      const query = this.createSelectorQuery()
      query
        .select('.chart-container')
        .boundingClientRect(rect => {
          this.setData({
            chartWidth: rect.width,
            chartHeight: rect.height,
          })

          // 获取Canvas实例
          this.getCanvasContext()
        })
        .exec()
    },
  },

  methods: {
    // 初始化图表数据
    initChart() {
      // 如果有传入的初始数据，则使用初始数据
      if (this.properties.initialData && Object.keys(this.properties.initialData).length > 0) {
        this.setData({
          chartData: this.properties.initialData,
        })
      }
    },
    initChannel() {
      if (this.data.channels.length > 0) {
        let chartData = {};
        let channelColors = {};
        this.data.channels.forEach(ele => {
          chartData[ele.n] = [{
              time: 8,
              brightness: 0
            }, // 起始点：8点，亮度0%
            {
              time: 20,
              brightness: 0
            }, // 结束点：20点，亮度0%
          ];
          channelColors[ele.n] = ele.c;
        });
        let columnClass = "cols-5"
        let len = this.data.channels.length
        if (len <= 5) {
          columnClass = `cols-${len}`;
        } else if (len < 7) {
          columnClass = "cols-3"
        } else if (len < 9) {
          columnClass = "cols-4"
        }
        this.setData({
          columnClass: columnClass,
          chartData: chartData,
          activeColor: this.data.channels[0].n,
          channelColors: channelColors
        });
      }
    },

    // 获取Canvas上下文
    getCanvasContext() {
      const query = this.createSelectorQuery()
      query
        .select('#chartCanvas')
        .fields({
          node: true,
          size: true
        })
        .exec(res => {
          const canvas = res[0].node
          const ctx = canvas.getContext('2d')

          // 设置画布尺寸
          const dpr = wx.getWindowInfo().pixelRatio
          canvas.width = res[0].width * dpr
          canvas.height = res[0].height * dpr
          ctx.scale(dpr, dpr)

          // 保存Canvas和上下文引用
          this.canvas = canvas
          this.ctx = ctx

          // 初始化图表
          this.drawChart()
        })
    },

    // 绘制图表
    drawChart() {
      // 确保上下文已初始化
      if (!this.ctx) return

      const ctx = this.ctx

      // 清空画布
      ctx.clearRect(0, 0, this.data.chartWidth, this.data.chartHeight)

      // 绘制坐标轴
      this.drawAxes(ctx)

      // 绘制曲线
      this.drawCurves(ctx)

      // 绘制节点
      this.drawNodes(ctx)
    },

    // 绘制坐标轴
    drawAxes(ctx) {
      const {
        chartWidth,
        chartHeight,
        xAxisTicks,
        yAxisTicks
      } = this.data
      const padding = 30 // 图表内边距
      const topPadding = padding + 15 // 顶部内边距增加15rpx

      // 设置坐标轴样式
      ctx.lineWidth = 1
      ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)'
      ctx.font = '10px sans-serif'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'

      // 绘制X轴
      ctx.beginPath()
      ctx.moveTo(padding, chartHeight - padding)
      ctx.lineTo(chartWidth - padding, chartHeight - padding)
      ctx.stroke()

      // 绘制X轴刻度
      xAxisTicks.forEach(tick => {
        const x = padding + (tick / 24) * (chartWidth - 2 * padding)

        // 刻度线
        ctx.beginPath()
        ctx.moveTo(x, chartHeight - padding)
        ctx.lineTo(x, chartHeight - padding + 5)
        ctx.stroke()

        // 刻度值
        ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
        ctx.fillText(tick.toString(), x, chartHeight - padding + 15)
      })

      // 绘制Y轴
      ctx.beginPath()
      ctx.moveTo(padding, topPadding)
      ctx.lineTo(padding, chartHeight - padding)
      ctx.stroke()

      // 绘制Y轴刻度
      yAxisTicks.forEach(tick => {
        const y = chartHeight - padding - (tick / 100) * (chartHeight - padding - topPadding)

        // 刻度线
        ctx.beginPath()
        ctx.moveTo(padding, y)
        ctx.lineTo(padding - 5, y)
        ctx.stroke()

        // 刻度值
        ctx.textAlign = 'right'
        ctx.fillText(tick + '%', padding - 10, y)
      })
    },

    // 绘制曲线
    drawCurves(ctx) {
      const {
        chartData,
        chartWidth,
        chartHeight,
        activeColor,
        channelColors
      } = this.data
      const padding = 30 // 图表内边距
      const topPadding = padding + 15 // 顶部内边距增加15rpx

      // 合并自定义颜色与默认颜色
      const colors = JSON.parse(JSON.stringify(channelColors))
      //console.log("colors:",colors)

      // 获取所有启用的颜色通道
      const allColors = Object.keys(chartData)

      // 重新排序颜色通道，将激活的颜色放在最后绘制
      const sortedColors = allColors.filter(color => color !== activeColor)
      if (allColors.includes(activeColor)) {
        sortedColors.push(activeColor)
      }

      // 按排序后的顺序绘制每条曲线
      sortedColors.forEach(color => {
        const points = chartData[color]
        if (points.length < 2) return

        // 设置曲线样式
        ctx.beginPath()
        ctx.lineWidth = 2
        ctx.strokeStyle = colors[color]

        // 绘制曲线路径
        points.sort((a, b) => a.time - b.time) // 按时间排序

        // 移动到第一个点
        const firstX = padding + (points[0].time / 24) * (chartWidth - 2 * padding)
        const firstY =
          chartHeight -
          padding -
          (points[0].brightness / 100) * (chartHeight - padding - topPadding)
        ctx.moveTo(firstX, firstY)

        // 连接后续点
        for (let i = 1; i < points.length; i++) {
          const x = padding + (points[i].time / 24) * (chartWidth - 2 * padding)
          const y =
            chartHeight -
            padding -
            (points[i].brightness / 100) * (chartHeight - padding - topPadding)
          ctx.lineTo(x, y)
        }

        // 绘制曲线
        ctx.stroke()
      })
    },

    // 绘制节点
    drawNodes(ctx) {
      const {
        chartData,
        chartWidth,
        chartHeight,
        activeColor,
        activeNodeIndex,
        channelColors
      } = this.data
      const padding = 30 // 图表内边距
      const topPadding = padding + 15 // 顶部内边距增加15rpx
      const nodeRadius = 6 // 节点半径

      // 合并自定义颜色与默认颜色
      const colors = JSON.parse(JSON.stringify(channelColors))

      // 获取所有启用的颜色通道
      const allColors = Object.keys(chartData)

      // 重新排序颜色通道，将激活的颜色放在最后绘制
      const sortedColors = allColors.filter(color => color !== activeColor)
      if (allColors.includes(activeColor)) {
        sortedColors.push(activeColor)
      }

      // 按排序后的顺序绘制每条曲线的节点
      sortedColors.forEach(color => {
        const points = chartData[color]
        const isActive = color === activeColor

        points.forEach((point, index) => {
          const x = padding + (point.time / 24) * (chartWidth - 2 * padding)
          const y =
            chartHeight - padding - (point.brightness / 100) * (chartHeight - padding - topPadding)

          // 判断是否为激活节点
          const isActiveNode = isActive && index === activeNodeIndex

          // 设置节点样式
          ctx.beginPath()
          ctx.lineWidth = isActiveNode ? 2 : 1
          ctx.fillStyle = colors[color]
          ctx.strokeStyle = isActiveNode ? '#ffffff' : colors[color]

          // 绘制节点
          ctx.arc(x, y, isActiveNode ? nodeRadius + 2 : nodeRadius, 0, 2 * Math.PI)
          ctx.fill()

          // 激活节点添加光环效果
          if (isActiveNode) {
            ctx.beginPath()
            ctx.arc(x, y, nodeRadius + 4, 0, 2 * Math.PI)
            ctx.stroke()
          }
        })
      })
    },

    // 处理点击事件
    onChartTap(e) {
      const {
        chartWidth,
        chartHeight,
        chartData,
        activeColor
      } = this.data
      const padding = 30 // 图表内边距
      const topPadding = padding + 15 // 顶部内边距增加15rpx
      const nodeRadius = 6 // 节点半径

      // 修复：检查事件对象中的触摸点信息
      let touchX, touchY;

      // 兼容多种事件对象格式
      if (e.touches && e.touches.length > 0) {
        // 触摸事件
        touchX = e.touches[0].x;
        touchY = e.touches[0].y;
      } else if (e.changedTouches && e.changedTouches.length > 0) {
        // 一些触摸事件使用 changedTouches
        touchX = e.changedTouches[0].x;
        touchY = e.changedTouches[0].y;
      } else if (e.detail) {
        // 点击事件
        touchX = e.detail.x;
        touchY = e.detail.y;
      } else {
        // 无法获取坐标，直接退出
        console.error('无法获取触摸坐标', e);
        return;
      }

      // 检查是否点击了节点
      let foundNode = false;
      const points = chartData[activeColor];

      if (!points || !Array.isArray(points)) {
        console.error(`activeColor[${activeColor}]对应的点数据不是数组:`, points);
        return;
      }

      for (let i = 0; i < points.length; i++) {
        const nodeX = padding + (points[i].time / 24) * (chartWidth - 2 * padding)
        const nodeY =
          chartHeight -
          padding -
          (points[i].brightness / 100) * (chartHeight - padding - topPadding)

        // 计算点击位置与节点的距离
        const distance = Math.sqrt(Math.pow(touchX - nodeX, 2) + Math.pow(touchY - nodeY, 2))

        // 如果点击位置在节点范围内
        if (distance <= nodeRadius + 5) {
          this.setData({
            activeNodeIndex: i,
            showDeleteButton: true,
          })
          foundNode = true
          break
        }
      }

      // 如果没有点击到节点，取消选中状态
      if (!foundNode) {
        this.setData({
          activeNodeIndex: -1,
          showDeleteButton: false,
        })
      }

      // 检测双击事件，用于重置图表视图
      const currentTime = new Date().getTime()
      if (currentTime - this.data.lastTapTime < 300) {
        // 双击，重置图表视图
        this.resetChartView()
      }
      this.setData({
        lastTapTime: currentTime,
      })

      // 重绘图表
      this.drawChart()
    },

    // 处理长按事件
    onChartLongPress(e) {
      const {
        activeNodeIndex,
        chartData,
        activeColor
      } = this.data

      // 如果有选中的节点，显示编辑弹窗
      if (activeNodeIndex !== -1) {
        const node = chartData[activeColor][activeNodeIndex]
        // 格式化时间字符串
        const formattedTime = this.formatTime(node.time)

        // 将Canvas转为临时图片，解决弹窗被Canvas遮挡的问题
        if (this.canvas) {
          wx.canvasToTempFilePath({
            canvas: this.canvas,
            success: res => {
              // 设置Canvas图片URL并显示图片，同时隐藏Canvas
              this.setData({
                canvasImageUrl: res.tempFilePath,
                showCanvasImage: true,
                hideCanvas: true,
                showNodeEditor: true,
                editingNode: {
                  time: node.time,
                  brightness: node.brightness,
                  index: activeNodeIndex,
                  timeString: formattedTime, // 添加timeString属性用于显示
                },
              })
            },
            fail: err => {
              console.error('Canvas转图片失败:', err)
              // 转换失败时仍然显示弹窗，但不隐藏Canvas
              this.setData({
                showNodeEditor: true,
                editingNode: {
                  time: node.time,
                  brightness: node.brightness,
                  index: activeNodeIndex,
                  timeString: formattedTime,
                },
              })
            },
          })
        } else {
          // Canvas未初始化时直接显示弹窗
          this.setData({
            showNodeEditor: true,
            editingNode: {
              time: node.time,
              brightness: node.brightness,
              index: activeNodeIndex,
              timeString: formattedTime,
            },
          })
        }
      }
    },

    // 处理拖动开始
    onTouchStart(e) {
      // 阻止页面滚动
      e.preventDefault && e.preventDefault()
      e.stopPropagation && e.stopPropagation()

      if (e.touches.length === 1) {
        // 单指触摸，可能是拖动节点
        const {
          activeNodeIndex
        } = this.data
        if (activeNodeIndex !== -1) {
          this.setData({
            isDragging: true,
            touchStartX: e.touches[0].x,
            touchStartY: e.touches[0].y,
          })
        }
      } else if (e.touches.length === 2) {
        // 双指触摸，准备缩放
        // 记录初始触摸点位置，用于计算缩放
      }
    },

    // 处理拖动过程
    onTouchMove(e) {
      // 阻止页面滚动
      e.preventDefault && e.preventDefault()
      e.stopPropagation && e.stopPropagation()

      const {
        isDragging,
        activeNodeIndex,
        chartData,
        activeColor,
        chartWidth,
        chartHeight
      } =
      this.data
      const padding = 30 // 图表内边距
      const topPadding = padding + 15 // 顶部内边距增加15rpx

      if (isDragging && activeNodeIndex !== -1) {
        // 计算拖动后的位置
        const touch = e.touches[0]
        const x = touch.x
        const y = touch.y

        // 转换为时间和亮度值
        let time = ((x - padding) / (chartWidth - 2 * padding)) * 24
        let brightness = 100 - ((y - padding) / (chartHeight - padding - topPadding)) * 100

        // 限制范围
        time = Math.max(0, Math.min(24, time))
        brightness = Math.max(0, Math.min(100, Math.ceil(brightness))) // 使用Math.ceil确保亮度值为整数

        // 检查时间冲突
        const points = chartData[activeColor]
        const prevNode = activeNodeIndex > 0 ? points[activeNodeIndex - 1] : null
        const nextNode = activeNodeIndex < points.length - 1 ? points[activeNodeIndex + 1] : null

        // 处理时间冲突
        if (prevNode && time <= prevNode.time) {
          time = prevNode.time + 1 / 6 // 至少相差10分钟
        }
        if (nextNode && time >= nextNode.time) {
          time = nextNode.time - 1 / 6 // 至少相差10分钟
        }

        // 更新节点位置
        const updatedPoints = [...points]
        updatedPoints[activeNodeIndex] = {
          time,
          brightness
        }

        // 更新数据并重绘
        const updatedChartData = {
          ...chartData
        }
        updatedChartData[activeColor] = updatedPoints

        this.setData({
          chartData: updatedChartData,
        })

        // 重绘图表
        this.drawChart()
      } else if (e.touches.length === 2) {
        // 处理双指缩放
        // 计算缩放比例并更新图表视图
      }
    },

    // 处理拖动结束
    onTouchEnd(e) {
      // 阻止页面滚动
      e.preventDefault && e.preventDefault()
      e.stopPropagation && e.stopPropagation()

      this.setData({
        isDragging: false,
      })

      // 触发数据更新事件
      this.triggerEvent('change', {
        chartData: this.data.chartData
      })
    },

    // 添加节点
    addNode() {
      const {
        chartData,
        activeColor
      } = this.data
      const points = chartData[activeColor]

      // 检查节点数量限制
      if (points.length >= 20) {
        wx.showToast({
          title: '每条曲线最多20个节点',
          icon: 'none',
        })
        return
      }

      // 计算新节点的位置（在时间轴中间添加）
      let newTime = 12 // 默认在12点添加

      // 查找合适的位置（找到最大的时间间隔）
      if (points.length > 1) {
        let maxGap = 0
        let insertTime = 12

        // 按时间排序
        const sortedPoints = [...points].sort((a, b) => a.time - b.time)

        // 查找最大时间间隔
        for (let i = 0; i < sortedPoints.length - 1; i++) {
          const gap = sortedPoints[i + 1].time - sortedPoints[i].time
          if (gap > maxGap) {
            maxGap = gap
            insertTime = sortedPoints[i].time + gap / 2
          }
        }

        newTime = insertTime
      }

      // 创建新节点
      const newNode = {
        time: newTime,
        brightness: 50, // 默认亮度50%
      }

      // 添加新节点
      const updatedPoints = [...points, newNode]

      // 更新数据
      const updatedChartData = {
        ...chartData
      }
      updatedChartData[activeColor] = updatedPoints

      this.setData({
        chartData: updatedChartData,
        activeNodeIndex: updatedPoints.length - 1,
        showDeleteButton: true,
      })

      // 重绘图表
      this.drawChart()

      // 触发数据更新事件
      this.triggerEvent('change', {
        chartData: updatedChartData
      })
    },

    // 删除节点
    deleteNode() {
      const {
        chartData,
        activeColor,
        activeNodeIndex
      } = this.data
      const points = chartData[activeColor]

      // 检查是否是起始或结束节点（不可删除）
      if (points[activeNodeIndex].time === 0 || points[activeNodeIndex].time === 24) {
        wx.showToast({
          title: '起始和结束节点不可删除',
          icon: 'none',
        })
        return
      }

      // 删除节点
      const updatedPoints = [...points]
      updatedPoints.splice(activeNodeIndex, 1)

      // 更新数据
      const updatedChartData = {
        ...chartData
      }
      updatedChartData[activeColor] = updatedPoints

      this.setData({
        chartData: updatedChartData,
        activeNodeIndex: -1,
        showDeleteButton: false,
      })

      // 重绘图表
      this.drawChart()

      // 触发数据更新事件
      this.triggerEvent('change', {
        chartData: updatedChartData
      })
    },

    // 切换曲线
    switchCurve(e) {
      const color = e.currentTarget.dataset.color
      this.setData({
        activeColor: color,
        activeNodeIndex: -1,
        showDeleteButton: false,
      })

      // 重绘图表
      this.drawChart()
    },

    // 重置图表视图（仅重置缩放和平移）
    resetChartView() {
      this.setData({
        scale: 1,
        offsetX: 0,
        offsetY: 0,
      })

      // 重绘图表
      this.drawChart()
    },

    // 重置图表数据
    resetChart() {
      const $t = this
      wx.showModal({
        title: '确认重置',
        content: '确定要重置所有曲线数据吗？这将恢复到默认设置。',
        success: res => {
          if (res.confirm) {
            // 重置为默认数据
            let chartData = {};
            $t.data.channels.forEach(ele => {
              chartData[ele.n] = [{
                  time: 8,
                  brightness: 0
                }, // 起始点：8点，亮度0%
                {
                  time: 20,
                  brightness: 0
                }, // 结束点：20点，亮度0%
              ];
            });

            // 更新图表数据
            this.setData({
              chartData: chartData,
              activeNodeIndex: -1,
              showDeleteButton: false,
            })

            // 重绘图表
            this.drawChart()

            // 触发数据更新事件
            this.triggerEvent('change', {
              chartData: chartData
            })

            // 显示成功提示
            wx.showToast({
              title: '已重置为默认设置',
              icon: 'success',
            })
          }
        },
      })
    },

    // 保存节点编辑
    saveNodeEdit() {
      const {
        chartData,
        activeColor,
        editingNode
      } = this.data
      if (!this.data.editable) {
        wx.showModal({
          title: '提示',
          content: '当前状态下无法编辑节点信息!',
          showCancel: false,
        })
        return
      }

      // 获取输入的时间和亮度
      let time = parseFloat(editingNode.time)
      let brightness = Math.ceil(parseFloat(editingNode.brightness)) // 确保亮度值为整数

      // 验证输入
      if (isNaN(time) || isNaN(brightness)) {
        wx.showToast({
          title: '请输入有效的数值',
          icon: 'none',
        })
        return
      }

      // 限制范围
      time = Math.max(0, Math.min(24, time))
      brightness = Math.max(0, Math.min(100, brightness))

      // 检查时间冲突
      const points = chartData[activeColor]
      const prevNode = editingNode.index > 0 ? points[editingNode.index - 1] : null
      const nextNode = editingNode.index < points.length - 1 ? points[editingNode.index + 1] : null

      // 处理时间冲突
      let timeConflict = false
      if (prevNode && time <= prevNode.time) {
        time = prevNode.time + 1 / 6 // 至少相差10分钟
        timeConflict = true
      }
      if (nextNode && time >= nextNode.time) {
        time = nextNode.time - 1 / 6 // 至少相差10分钟
        timeConflict = true
      }

      // 如果有时间冲突，提示用户
      if (timeConflict) {
        wx.showToast({
          title: '时间冲突已自动调整',
          icon: 'none',
        })
      }

      // 更新节点
      const updatedPoints = [...points]
      updatedPoints[editingNode.index] = {
        time,
        brightness
      }

      // 更新数据
      const updatedChartData = {
        ...chartData
      }
      updatedChartData[activeColor] = updatedPoints

      this.setData({
        chartData: updatedChartData,
        showNodeEditor: false,
        editingNode: null,
        // 恢复Canvas显示并隐藏临时图片
        showCanvasImage: false,
        hideCanvas: false,
        canvasImageUrl: '',
      })

      // 重绘图表
      this.drawChart()

      // 触发数据更新事件
      this.triggerEvent('change', {
        chartData: updatedChartData
      })
    },

    // 取消节点编辑
    cancelNodeEdit() {
      this.setData({
        showNodeEditor: false,
        editingNode: null,
        // 恢复Canvas显示并隐藏临时图片
        showCanvasImage: false,
        hideCanvas: false,
        canvasImageUrl: '',
      })
    },

    // 格式化时间显示
    formatTime(time) {
      if (time === null || time === undefined) {
        return '00:00'
      }
      const hours = Math.floor(time)
      const minutes = Math.round((time - hours) * 60)
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
    },

    // 处理时间选择器变化
    onTimePickerChange(e) {
      const timeString = e.detail.value
      const [hours, minutes] = timeString.split(':').map(Number)
      const time = hours + minutes / 60

      // 更新编辑中的节点数据
      const editingNode = {
        ...this.data.editingNode
      }
      editingNode.time = time
      editingNode.timeString = timeString // 添加timeString属性，用于显示在时间选择器中

      this.setData({
        editingNode: editingNode,
      })

      // 强制更新视图
      this.setData({
        editingNode: editingNode,
      })
    },

    // 处理亮度输入框获取焦点
    onBrightnessFocus(e) {
      // 清空输入框
      const editingNode = {
        ...this.data.editingNode
      }
      this.setData({
        tempBrightness: editingNode.brightness, // 保存原始值
        editingNode: {
          ...editingNode,
          brightness: '',
        },
      })
    },

    // 处理亮度输入框失去焦点
    onBrightnessBlur(e) {
      const value = e.detail.value
      const editingNode = {
        ...this.data.editingNode
      }

      // 如果没有输入值或输入值不在范围内，恢复原始值
      if (value === '' || isNaN(value) || Number(value) < 1 || Number(value) > 100) {
        editingNode.brightness = Math.ceil(this.data.tempBrightness || 50) // 默认值50%
      } else {
        editingNode.brightness = Math.ceil(Number(value))
      }

      this.setData({
        editingNode: editingNode,
        tempBrightness: null,
      })
    },

    // 处理节点编辑输入变化
    onNodeInputChange(e) {
      const field = e.currentTarget.dataset.field
      let value = e.detail.value

      // 对亮度进行范围限制
      if (field === 'brightness' && value !== '') {
        const numValue = Number(value)
        if (!isNaN(numValue)) {
          if (numValue < 1) value = '1'
          if (numValue > 100) value = '100'
          value = Math.ceil(numValue)
        } else {
          value = Math.ceil(this.data.editingNode.brightness) || 50
        }
      }

      // 更新编辑中的节点数据
      const editingNode = {
        ...this.data.editingNode
      }
      editingNode[field] = value

      this.setData({
        editingNode: editingNode,
      })
    },
  },
})